<template>
	<view class="center">
		<view class="center_top">
			<view class="mask"></view>
		</view>
		<view class="center_box_bg">
			<view class="profily">
				
				<!-- 未登录 -->
				<view v-if="!vuex_user.username" class="base">
					<!-- <u-button type="success" shape="circle" @click="wxlogin()" style="margin: auto;">微信一键登录</u-button>
					 -->
					<!-- 账号信息 -->
					<image class="profily_header" src="../../static/my/header.jpg" mode=""></image>
					<text class="text" style="font-size: medium; font-weight: 600;" @click="wxlogin()">登陆/注册</text>
					<text class="text" style="margin-left: 20rpx; font-size: 14px; margin-top: 2px;">xx班</text>
					<image class="image" src="../../static/my/setting.png" mode="" @click="setUp"></image>
				</view>
				
				<!-- 已登录 -->
				<view v-if="vuex_user.username" class="base">
					<!-- 账号信息 -->
					<!-- <image class="profily_header" :src="vuex_user.headUrl" mode=""></image> -->
		
					<u-avatar v-if="vuex_user.sex==0" :src="vuex_user.headUrl" mode="square" size='large' show-sex='true' sex-icon='woman'></u-avatar>
					<u-avatar v-else :src="vuex_user.headUrl" mode="square" size='large' show-sex='true' sex-icon='man'></u-avatar>
					<text class="text" style="font-size: medium; font-weight: 600;">{{vuex_user.realName}}</text>
					<text class="text" style="margin-left: 20rpx; font-size: 14px; margin-top: 2px;">{{vuex_user.majorClass}}班</text>
					<image class="image" src="../../static/my/setting.png" mode="" @click="show = true">
						<u-action-sheet :list="list" v-model="show" @click="change"></u-action-sheet>
					</image>
				</view>
				<view class="order_status">
				<!-- 	<view class="status" >
						<text class="number">0</text>
						<text class="style">关注</text>
					</view> -->
					<view class="status" >
						<text class="number">{{vuex_user.myCollection}}</text>
						<text class="style">收藏</text>
					</view>
					<view class="status" >
						<text class="number">{{vuex_user.myHelp}}</text>
						<text class="style">互助</text>
					</view>
					<view class="status" >
						<text class="number">{{vuex_user.myActivity}}</text>
						<text class="style">活动</text>
					</view>
					<view class="status" >
						<text class="number">{{vuex_user.myAlbum}}</text>
						<text class="style">相册</text>
					</view>
					
				</view>
			</view>
			<view class="baiban">

			</view>

			<view class="u-m-t-20">
				<u-cell-group>
					
					<navigator url="my_collection">
						<u-cell-item icon="star" title="我的收藏"></u-cell-item>
					</navigator>
					
					<navigator url="my_help">
						<u-cell-item icon="heart" title="我的互助"></u-cell-item>
					</navigator>
					
					<navigator url="my_album">
						<u-cell-item icon="photo" title="我的相册"></u-cell-item>
					</navigator>
					
					<navigator url="my_activity">
						<u-cell-item icon="order" title="我的活动"></u-cell-item>
					</navigator>
	
				</u-cell-group>
				
				<view class="u-m-t-20"></view>
				
				<u-cell-group>
				<!-- 	<navigator url="mySend">
						<u-cell-item icon="zhuanfa" title="我的关注"></u-cell-item>
					</navigator> -->
					
					<navigator url="myAttention">
						<u-cell-item icon="plus" title="我的报名" @click="myApply"></u-cell-item>
					</navigator>
	
					<view>
						<u-cell-item icon="bookmark" title="订阅消息" @click="push"></u-cell-item>
					</view>
					
					<div>
						<div style=''>
							<u-cell-item icon="share" title="邀请校友"></u-cell-item>
						</div>
						<div style="margin-top: -50px;">
							<button data-name="shareBtn" open-type="share" style="background: rgba(0,0,0,0); border: none; color: #ffffff;">
								分享
							</button>
						</div>
					</div>
				</u-cell-group>
			</view>
		
			<!-- <view class="u-m-t-20">
				<u-cell-group>
					<u-cell-item icon="reload" title="退出登录" @click="logout"></u-cell-item>
				</u-cell-group>
			</view> -->
		</view>
		
		<view class="content" @click="hideDrawer">
		    <tabbar :pagePath="'pages/my/my_index'"></tabbar>
		    <zl-down :isDownShow="isDownShow" @choseBtn="choseBtn"></zl-down>
		</view>
	</view>
</template>

<script>
	import zlDown from '../../components/zlDown/zlDown.vue'
	export default {
		components: {
		    zlDown
		},
		data() {
			return {
				title: '我的',
				isDownShow: false,
				show: false,
				list: [
					{
						label: '修改个人信息',
						// color: 'blue',
						// fontSize: 28,
						// subText: '感谢您的点赞'
					}, {
						label: '重新登录'
					}, {
						label: '退出登录' 
					},
				],
				userInfo: {},
			};
		},
		onLoad() {
		    uni.hideTabBar();
			// if(this.vuex_token==null) this.wxlogin()
		},
		onShareAppMessage: function (res) {
			if (res.from === 'button') {// 来自页面内分享按钮
					console.log(res.target)
			}
			return {     //自定义转发分享内容
			  title: '滁院校友圈',        //转发标题
			  path: '/pages/my/my_index',     //用户点击转发小程序后进来的页面
			  imageUrl: ''
			}     //转发显示图片的链接,网络、本地图片路径均可，显示图片长宽比是 5:4
		},
		methods: {
			onNavigationBarButtonTap() {
			    this.isDownShow = !this.isDownShow
			},
			hideDrawer() { 
			    if (this.isDownShow == true)
			        this.isDownShow = false
			},
			choseBtn(val) {
			    this.isDownShow = true
			    uni.showToast({
			        title:val.name
			    })
			},
			
			// 微信登录
			wxlogin(){
				var that = this
				uni.showModal({
					mask: true,
					title: '温馨提示',
					content: '授权微信登录后才能正常使用小程序功能',
					success(res) {
						if (res.confirm) {
							uni.getUserProfile({
								desc: '获取你的昵称、头像',
								success: userRes => {
									// console.log(userRes);
									if (userRes.errMsg == 'getUserProfile:ok' && userRes.userInfo != undefined) {
										that.userInfo.headUrl = userRes.userInfo.avatarUrl
										that.userInfo.username = userRes.userInfo.nickName
										//一次会可能获取不到临时openId
										uni.login({
											provider: 'weixin',
											async success(loginAuth) {
												if(loginAuth.code!=null) {
													that.userInfo.openId = loginAuth.code
												}
											}
										})
										that.$u.api.wxUserSelectOne(that.userInfo).then(res=> {
											that.userInfo.openId = res.data.openId
											if(res.data.result == "true") {
												uni.navigateTo({
													url: "/pages/my/registe?userInfo=" + encodeURIComponent(JSON.stringify(that.userInfo)),
												});
											}
											else {
												that.getUserInfo()
											}
										}) 
									} else {
										uni.showToast({
											icon:"none",
											title:"获取失败，请重试"
										})
									}
								},
								fail: error => {}
							});
							
							
						} else if (res.cancel) {}
					}
				});
				
			}, 
			async getUserInfo() {
				uni.showLoading({
					title: '登录中'
				});
				var that = this
				const res = await that.$u.api.wxLogin(that.userInfo)
				that.$u.vuex('vuex_token',res.data)
				
				const params = {
					openId: that.userInfo.openId
				}
				const info = await that.$u.api.userInfo(params)
				that.$u.vuex('vuex_user', info.data)
							
				if(res.code==200 && info.code==200) {
					uni.showToast({
						title:"登录成功"
					})
				} else {
					uni.showToast({
						icon:"none",
						title:"获取失败，请重试"
					})
				}
														
				setTimeout(function () {
				  uni.hideLoading()
				}, 2000)
			},
			//授权开启消息推送
			async push(){
					// console.log(this.vuex_token);
					/* 活动开始、活动报名截止、同级校友注册 */
					const tmplId1 = 'TlKu4j9uLTbAWnvHEMEFR-1DKosYRqMwyy4SBbdttTU'
					const tmplId2 = '6wQBvNGRwhww82y6qUiHLRqVqdbDwo-VMzDctFryyD4'
					const tmplId3 = 'X7INlYTXLEkXx2-t2t6omPjAYFXCqjZgdo7wz-C2Nvk'
					if(this.vuex_token != null && this.vuex_token != ''){
						uni.requestSubscribeMessage({
							tmplIds: [tmplId1, tmplId2],
							success (res) { 
								if (res[tmplId1] === 'reject' || res[tmplId2] === 'reject' || res[tmplId3] === 'reject') {
									//引导用户，手动引导用户点击按钮，去设置页开启，## Modals是自定义组件
									wx.showModal({
									  title: '订阅消息',
									  content: '您当前拒绝接受部分消息通知，是否去开启',
									  confirmText: '开启授权',
									  confirmColor: '#345391',
									  cancelText: '仍然拒绝',
									  cancelColor: '#999999',
									  success(res) {
										if (res.confirm) {
										  // console.log('用户点击确定')
										  wx.openSetting({
											success(res) {
											  console.log(res.authSetting)
											},
											fail(err) {
											  //失败
											  console.log(err)
											}
										  })
										} else if (res.cancel) {
										  console.log('用户点击取消')
										}
									  }
									})

								} else {
									wx.showToast({
									  title: '订阅成功！',
									  icon: 'success'
									})
								}
							},
							fail(res) {
							  console.log("订阅失败", res)
							}
						})
					}else {
						this.$u.toast("未登录")
					}
			},
			//退出登录
			async logout(){
				if(this.vuex_token != null && this.vuex_token != ''){
					uni.showLoading({
						title: '退出中'
					});
					setTimeout(() => {
						//清除缓存token和用户信息
						this.$u.vuex('vuex_token', null)
						this.$u.vuex('vuex_user', {})
						//跳转页面
						this.$u.route({
							type: 'reLaunch',
							url: 'pages/my/my_index'
						})
					}, 1500)
					//后端退出清理token
					await this.$u.api.wxLogout(this.vuex_token).then(res=>{
						uni.hideLoading();
						if(res.code == 200) {
							uni.showToast({
								icon: 'success',
								title:"退出成功"
							})
						} else {
							uni.showToast({
								icon: 'error',
								title:"退出失败"
							})
						}
						
					})
				}else {
					uni.showToast({
						title:"未登录",
						icon: "error"
					})
					/* this.$u.toast("未登录") */
				}
			},
			//设置
			change(index) {
				// console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
				if(index==0) {
					//跳转修改个人信息
					
				} else if(index==1) {
					this.logout()
					setTimeout(() => {
						this.wxlogin()
					},1500)
				} else if(index==2) {
					this.logout()
				}
			},
			//我报名的活动
			myApply() {
				uni.navigateTo({
					url: "./my_apply"
				});
			},
			//上拉刷新
			async onPullDownRefresh() {
				//置空后重新获取第一页
				if(this.$store.state.vuex_user.openId) {
					const params = {
						openId: this.$store.state.vuex_user.openId,
					}
					const info = await this.$u.api.userInfo(params)
					this.$u.vuex('vuex_user', info.data)
				} else {
					uni.showToast({
						title:"未登录",
						icon: "error"
					})
				}
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
			},
		},
		
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.profily,
	.profily_header {
		border-radius: 8px;
	}

	.center {
		height: 100%;
		&_top {
			height: 15%;
			width: 100%;
			background: url('http://qiniu.chzuchen.xyz/other/969f8ad950a44587b1a4bc0ad1a2c783.jpg') no-repeat 50% 50%;
			background-size: cover;

			// background: #E6E6E6;
			.mask {
				background: rgba(0, 0, 0, .4);
				height: 100%;
			}
		}

		&_box_bg {
			background: #F9F9F9;
			position: relative;

			.profily {
				position: absolute;
				width: 90%;
				// border:1px solid #F7F7F7;
				margin: 0 auto;
				top: -100upx;
				left: 5%;
				background: #FEFEFE;
				padding: 35upx;
				box-sizing: border-box;
				box-shadow: 0px 2px 5px #EDEDED;
			}
		}
	}

	.base {
		display: flex;
		align-items: center;
		border-bottom: 2px solid #F6F6F6;
		padding-bottom: 35upx;
		position: relative;
		.profily_header {
			height: 120upx;
			width: 120upx;
			/* background-image: url('../../static/my/header.jpg'); */
			background-size: 100%;
		}

		.text {
			margin-left: 20px;
			font-size: 30upx;
		}
		
		.image{
			position: absolute;
			height: 40upx;
			width: 40upx;
			right: 0px;
			top:0px;
		}
	}

	.order_status {
		display: flex;
		justify-content: space-between;
		margin-top: 35upx;

		.status {
			width: 140upx;
			font-size: 24upx;
			text-align: center;
			letter-spacing: .5px;
			display: flex;
			flex-direction: column;
			.icon {
				width: 50upx;
				height: 50upx;
				margin: 0 auto;
				margin-bottom: 5px;
				
			}
			.number {
				font-size: 17px;
				font-weight: 600;
			}
			.style {
				margin-top: auto; 
				font-size: 13px; 
				color: #cccccc;
			}
		}
	}

	.baiban {
		background: #FEFEFE;
		height: 250upx;
	}
	button::after {
	   border: none;
	}
</style>
